<template>
  <div class="employee_list">
    <!-- 员工列表操作 -->
    <el-row class="empolyee_operation">
      <el-col :span="18">
        <div class="title">员工列表</div>
      </el-col>
      <el-col :span="5">
        <el-tooltip class="item" effect="light" content="添加" placement="top">
          <el-button type="primary" class="iconfont icon-tianjia" @click="showAddEmployee = true" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="修改" placement="top">
          <el-button type="warning" class="iconfont icon-xiugai" @click="editEmployeePopups" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="删除" placement="top">
          <el-button type="danger" class="iconfont icon-changyonggoupiaorenshanchu" @click="deleteEmployeePopups" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="启用" placement="top">
          <el-button type="success" class="iconfont icon-open" @click="acceptEmployee" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="禁用" placement="top">
          <el-button type="info" class="iconfont icon-jinyong" @click="forbiddenEmployee" circle></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 员工列表 -->
    <el-table :data="employeeList" border @selection-change="selectEmployeeChange">
      <el-table-column type="selection" width="60"/>
      <el-table-column prop="name" width="130px" label="姓名"/>
      <el-table-column prop="contactNumber" label="联系电话"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="address" label="地址" width="190px"/>
      <el-table-column prop="detailAddress" label="详细地址地址" width="300px"/>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
            <el-tag :type="scope.row.state == '已启用' ? 'success' : 'danger'">{{ scope.row.state }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 员工分页 -->
    <el-pagination
        @size-change="handleEmployeeTableSizeChange"
        @current-change="handleEmployeeTableCurrentChange"
        :current-page="employeePageList.currentPage"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="employeeTotal">
    </el-pagination>
    <!-- 添加员工弹出层 -->
    <el-dialog  title="添加员工" :visible.sync="showAddEmployee" width="40%" @close="handleCloseAddEmployee" append-to-body>
        <el-form :model="addEmployeeForm" ref="addEmployeeFormRef" :rules="addEmployeeFormRules">
            <!-- 员工姓名 -->
            <el-form-item prop="name">
                <el-input placeholder="请输入员工姓名" v-model="addEmployeeForm.name" clearable>
                  <template slot="prepend">员工姓名</template>
                </el-input>
            </el-form-item>
            <!-- 员工密码 -->
            <el-form-item prop="password">
              <el-input placeholder="请输入员工密码" v-model="addEmployeeForm.password" show-password clearable>
                    <template slot="prepend">员工密码</template>
                </el-input>
            </el-form-item>
            <!-- 联系电话 -->
            <el-form-item prop="contactNumber">
              <el-input placeholder="请输入员工联系电话" v-model="addEmployeeForm.contactNumber" clearable>
                    <template slot="prepend">员工联系电话</template>
                </el-input>
            </el-form-item>
            <!-- 地址 -->
            <el-cascader v-model="addressSelected" clearable placeholder="请选择地址" :options="addressDownBox"
              :props="{ expandTrigger: 'hover' }" @change="handleAddEmployeeAddressChange">
            </el-cascader>
            <!-- 详细地址 -->
            <el-form-item prop="detailAddress">
                <el-input 
                  clearable
                  placeholder="请输入详细地址" 
                  type="textarea" 
                  :autosize="{ minRows: 4, maxRows: 10}" 
                  v-model="addEmployeeForm.detailAddress"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="showAddEmployee = false">取 消</el-button>
            <el-button type="primary" @click="addEmployee">确 认</el-button>
        </span>
    </el-dialog>
    <!-- 修改员工弹出层 -->
    <el-dialog  title="修改员工" :visible.sync="showEditEmployee" width="40%" append-to-body>
        <el-form :model="editEmployeeForm" ref="editEmployeeForm" :rules="editEmployeeFormRules">
            <!-- 员工姓名 -->
            <el-form-item prop="name">
                <el-input placeholder="请输入员工姓名" v-model="editEmployeeForm.name" clearable>
                  <template slot="prepend">员工姓名</template>
                </el-input>
            </el-form-item>
            <!-- 员工密码 -->
            <el-form-item prop="password">
              <el-input placeholder="请输入员工密码" v-model="editEmployeeForm.password" show-password clearable>
                    <template slot="prepend">员工密码</template>
                </el-input>
            </el-form-item>
            <!-- 联系电话 -->
            <el-form-item prop="contactNumber">
              <el-input placeholder="请输入员工联系电话" v-model="editEmployeeForm.contactNumber" clearable>
                    <template slot="prepend">员工联系电话</template>
                </el-input>
            </el-form-item>
            <!-- 地址 -->
            <el-cascader v-model="addressSelected" clearable placeholder="请选择地址" :options="addressDownBox"
              :props="{ expandTrigger: 'hover' }" @change="handleEditEmployeeAddressChange">
            </el-cascader>
            <!-- 详细地址 -->
            <el-form-item prop="detailAddress">
                <el-input 
                  clearable
                  placeholder="请输入详细地址" 
                  type="textarea" 
                  :autosize="{ minRows: 4, maxRows: 10}" 
                  v-model="editEmployeeForm.detailAddress"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="showEditEmployee = false">取 消</el-button>
            <el-button type="primary" @click="editEmployee">确 认</el-button>
        </span>
    </el-dialog>
    <!-- 删除员工弹出层 -->
    <el-dialog title="删除员工" :visible.sync="showDeleteEmployee" width="30%" append-to-body>
      <el-row>
          <el-col :span="3">
            <svg t="1652248818186" class="icon" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4020" width="32" height="32"><path d="M133.534106 982.154208c-78.393906 0-113.368619-57.111137-77.716004-126.943393L444.214002 94.571489c35.652615-69.819703 95.023424-70.359514 131.931412-1.200974L983.376105 856.40342c36.916357 69.166909 2.975236 125.759158-75.410301 125.759157H133.534106v-0.008369z" fill="#FFB624" p-id="4021"></path><path d="M203.655099 894.734165c-63.208068 0-91.412132-50.687808-62.668258-112.661425l313.17809-675.060497c28.743874-61.965248 76.619645-62.44229 106.380372-1.062883l328.372297 677.182078c29.764912 61.387776 2.397764 111.611096-60.801936 111.611096H203.655099v-0.008369z" fill="#FFD91C" p-id="4022"></path><path d="M468.442715 376.22296v223.305883c0 28.88615 23.416905 52.30724 52.30724 52.307239 28.88615 0 52.30724-23.42109 52.30724-52.307239V376.22296c0-28.890335-23.42109-52.30724-52.30724-52.30724-28.890335 0-52.30724 23.416905-52.30724 52.30724zM468.442715 765.819834v33.254851c0 28.881965 23.416905 52.30724 52.30724 52.30724 28.88615 0 52.30724-23.425274 52.30724-52.30724v-33.254851c0-28.88615-23.42109-52.30724-52.30724-52.307239-28.890335 0-52.30724 23.42109-52.30724 52.307239z" fill="#6E6E96" p-id="4023"></path><path d="M133.534106 961.231312c-30.354937 0-53.006064-9.687301-63.781356-27.28764s-9.105644-42.180558 4.699283-69.217124l388.3959-760.635141c13.327885-26.103405 30.47629-41.159521 47.051408-41.310166 16.570934-0.150645 33.991337 14.591628 47.787894 40.443958l407.230692 763.032905c14.256861 26.714353 16.407735 50.934698 6.046717 68.20864-10.361018 17.265574-32.727594 26.768753-62.99884 26.768753H133.534106a20.922896 20.922896 0 1 1 0-0.004185z m0 41.849977h774.440067c45.549144 0 80.661948-16.729948 98.881606-47.101623 18.219658-30.37586 16.441212-69.242232-5.013126-109.435115L594.603593 83.520016c-21.701228-40.661556-51.913889-62.89004-85.085048-62.588751-33.171159 0.30129-62.977917 23.07377-83.942659 64.124491L37.179986 845.695081c-20.676006 40.502542-21.784919 79.59488-3.113327 110.100463 18.667408 30.493028 53.98944 47.28156 99.471632 47.28156a20.922896 20.922896 0 0 1-0.004185 0.004185z" fill="#6E6E96" p-id="4024"></path></svg>
          </el-col>
          <el-col :span="21">
            <div class="deleteEmployeeMsg">确定要删除这{{selectedEmployeeNumber}}条记录吗？</div>
          </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeleteEmployee = false">再想想</el-button>
        <el-button type="primary" @click="deleteEmployee">想好了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'EmployeeList',
    data() {

      /* 手机号表单验证 */
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('练习电话不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };

      return {
        /* 员工列表 */
        employeeList: [],
        /* 员工表分页信息 */
        employeePageList:{
          pageNo: 1,
          pageSize: 5,
          currentPage: 1,
          name: '',
          state: '',
          createTime: '',
          contactNumber: '',
          address: '',
        },
        /* 员工表总条数 */
        employeeTotal: 0,

        /* 选中员工个数 */
        selectedEmployeeNumber: 0,
        /* 选中员工数组 */
        selectedEmployee: [],

        /* 选中的地址 */
        addressSelected: '',
        /* 地址下拉框数据 */
        addressDownBox: [],

        /* 添加员工表单 */
        addEmployeeForm: {
          name: '',
          password: '',
          contactNumber: '',
          address: '',
          detailAddress: '',
          currentUserId: ''
        },
        /* 添加员工表单验证 */
        addEmployeeFormRules: {
          name: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入员工密码', trigger: 'blur' },
          ],
          contactNumber: [
            {validator: checkPhone, trigger: 'blur'}
          ],
        },
        /* 控制添加员工弹出层 */
        showAddEmployee: false,

        /* 修改员工表单 */
        editEmployeeForm: {
          id: '',
          name: '',
          password: '',
          contactNumber: '',
          address: '',
          detailAddress: '',
          currentUserId: ''
        },
        /* 修改员工表单验证 */
        editEmployeeFormRules: {
          name: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入员工密码', trigger: 'blur' },
          ],
        },
        /* 控制修改员工弹出层 */
        showEditEmployee: false,

        /* 删除员工id组 */
        deleteEmployeeIds: [],
        /* 控制删除员工弹出层 */
        showDeleteEmployee: false,

        /* 改变员工状态id组 */
        editEmployeeStatusIds: []
      }
    },
    methods: {
      /* 复选框选择目标事件回调 */
      selectEmployeeChange(selection) {
        this.selectedEmployeeNumber =  selection.length
        this.selectedEmployee = selection
      },

      /* 分页获得员工列表 */
      async getEmployeePageList(employee) {

        if(employee != undefined) {
          this.employeePageList.name = employee.name
          this.employeePageList.state = employee.state
          this.employeePageList.createTime = employee.createTime
          this.employeePageList.contactNumber= employee.contactNumber

          if(employee.address == 'undefined · undefined') {
            this.employeePageList.address = ''
          } else {
            this.employeePageList.address= employee.address
          }
        }

        const { data: res } = await this.$http.post('settings/employee/employeePageList.do',this.employeePageList)
        if (res.code == '1') {
          this.employeeList = res.others
        } else {
          this.$message.error('获取员工表失败!')
        }
      },
      /* 获得员工列表总条数 */
      async getEmployeeTotal() {
          const { data: res } = await this.$http.post('settings/employee/getEmployeeTotal.do',this.employeePageList)
          if (res.code == '1') {
            this.employeeTotal = res.number
          } else {
              this.$message.error('获取目标表总条数失败!')
          }
      },
      /* 处理分页每页显示几行 */
      handleEmployeeTableSizeChange(val) {
        this.employeePageList.pageSize = val
        this.getEmployeePageList()
        this.getEmployeeTotal()
      },
      /* 处理分页切换页数 */
      handleEmployeeTableCurrentChange(val) {
        this.employeePageList.pageNo = val
        this.getEmployeePageList()
        this.getEmployeeTotal()
      },

      /* 添加员工修改地址事件回调 */
      handleAddEmployeeAddressChange(value) {
        const address = value[0] + " · " + value[1]
        this.addEmployeeForm.address = address
      },
      /* 关闭添加员工弹出层事件回调 */
      handleCloseAddEmployee() {
        this.$refs['addEmployeeFormRef'].resetFields();
        this.addressSelected = ''
      },
      /* 添加员工 */
      async addEmployee() {
          this.$refs.addEmployeeFormRef.validate(async valid => {
            if (!valid) return
            const { data: res } = await this.$http.post('settings/employee/addEmployee.do',this.addEmployeeForm)
            if (res.code == '1') {
              this.showAddEmployee = false
              this.$refs['addEmployeeFormRef'].resetFields();
              this.getEmployeePageList()
              this.getEmployeeTotal()
              this.$message.success('添加员工成功!')
            } else {
              this.$message.error('添加目标失败!')
            }
          })
      },

      /* 修改员工修改地址事件回调 */
      handleEditEmployeeAddressChange(value) {
        const address = value[0] + " · " + value[1]
        this.editEmployeeForm.address = address
      },
      /* 修改员工弹出层 */
      editEmployeePopups() {
        if(this.selectedEmployeeNumber > 1) {
            this.$message.error('只能选择一条记录进行修改!')
            return
        }
        if(this.selectedEmployeeNumber < 1) {
            this.$message.error('请选择需要修改的记录!')
            return
        }
        this.editEmployeeForm.name = this.selectedEmployee[0].name
        this.editEmployeeForm.id = this.selectedEmployee[0].id
        this.editEmployeeForm.password = this.selectedEmployee[0].password
        this.editEmployeeForm.contactNumber = this.selectedEmployee[0].contactNumber
        this.editEmployeeForm.address = this.selectedEmployee[0].address
        this.editEmployeeForm.detailAddress = this.selectedEmployee[0].detailAddress

        const index = this.selectedEmployee[0].address.lastIndexOf(" ")
        const address = this.selectedEmployee[0].address.substring(index+1,this.selectedEmployee[0].address.length)
        this.addressSelected = address

        this.showEditEmployee = true
      },
      /* 修改员工 */
      async editEmployee() {
        const { data: res } = await this.$http.post('settings/employee/editEmployee.do',this.editEmployeeForm)
          if (res.code == '1') {
            this.getEmployeePageList()
            this.getEmployeeTotal()
            this.showEditEmployee = false
            this.$message.success('修改员工资料成功!')
          } else {
              this.$message.error('修改用户资料失败!')
          }
      },

      /* 启用员工 */
      async acceptEmployee() {
        if(this.selectedEmployeeNumber < 1) {
            this.$message.error('至少选择一条记录!')
            return
        }

        for (const employee of this.selectedEmployee) {
            this.editEmployeeStatusIds.push(employee.id)
        }

        const { data: res } = await this.$http.post('settings/employee/acceptEmployee.do',this.editEmployeeStatusIds)
        if (res.code == '1') {
          this.getEmployeePageList()
          this.$message.success('修改员工状态成功!')
        } else {
          this.$message.error('修改用户状态失败!')
        }
      },

      /* 禁用员工 */
      async forbiddenEmployee() {
        if(this.selectedEmployeeNumber < 1) {
            this.$message.error('至少选择一条记录!')
            return
        }

        for (const employee of this.selectedEmployee) {
            this.editEmployeeStatusIds.push(employee.id)
        }

        const { data: res } = await this.$http.post('settings/employee/forbiddenEmployee.do',this.editEmployeeStatusIds)
        if (res.code == '1') {
          this.getEmployeePageList()
          this.$message.success('修改员工状态成功!')
        } else {
          this.$message.error('修改用户状态失败!')
        }
      },

      /* 删除员工弹出层 */
      deleteEmployeePopups() {
        if(this.selectedEmployeeNumber < 1) {
            this.$message.error('请选择需要删除的记录!')
            return
        }

        this.showDeleteEmployee = true
        for (const employee of this.selectedEmployee) {
            this.deleteEmployeeIds.push(employee.id)
        }
      },
      /* 删除员工 */
      async deleteEmployee() {
        const { data: res } = await this.$http.post('settings/employee/deleteEmployee.do',this.deleteEmployeeIds)
        if (res.code == '1') {
          this.showDeleteEmployee = false
          this.getEmployeePageList()
          this.getEmployeeTotal()
          this.$message.success('删除员工成功!')
        } else {
          this.$message.error('删除员工失败!')
        }
      },

      /* 获得地址下拉框数据 */
      async getAddressData() {
          const { data: res } = await this.$http.get('settings/provinceCity/getAddressData.do')
          if (res.code == '1') {
            this.addressDownBox = res.others
          } else {
              console.log('获取地址下拉框数据失败!')
          }
      },

      /* 初始化当前登录用户 */
      getCurrentUser() {
        let user = JSON.parse(window.localStorage.getItem('user'))
        this.addEmployeeForm.currentUserId = user.id
        this.editEmployeeForm.currentUserId = user.id
      },
    },
    created() {
      /* 初始化数据 */
      this.getEmployeePageList()
      this.getEmployeeTotal()
      this.getAddressData()
      this.getCurrentUser()
    },
    mounted() {
      this.$bus.$on('getEmployeePageList',this.getEmployeePageList)
      this.$bus.$on('getEmployeeTotal',this.getEmployeeTotal)
    },
    beforeDestroy() {
      this.$bus.$off('getEmployeePageList')
      this.$bus.$off('getEmployeeTotal')
    }
  }
</script>

<style scoped>
/* 员工列表操作 */
.empolyee_operation {
  background-color: #fff;
  margin: 0px 0px;
  height: 70px;
}
.empolyee_operation .title {
  line-height: 70px;
  margin-left: 15px;
  font-weight: bold;
}
.empolyee_operation .el-button {
  margin-top: 15px;
}
/* 员工列表 */
.employee_list {
  margin: 20px 20px;
  box-shadow: 0 0 10px rgb(220, 223, 220);
}
/* 员工分页 */
.el-pagination {
  text-align: center;
  padding: 15px 0px;
  background-color: #fff;
}
/* 添加员工弹出层 */
.el-cascader {
  margin-bottom: 20px;
}
/* 删除目标弹出层样式 */
.deleteEmployeeMsg {
    margin-left: 10px;
    line-height: 35px;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
